<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
    <link th:replace="~{common::common_head}">
</head>

<body class="">
    <div class="wrapper">
        <!--侧边栏-->
        <div th:insert="~{common::sidebar(active='dashboard.html')}"></div>
        <!--主面板-->
        <div class="main-panel">
            <!-- Navbar导航栏 -->
            <nav th:replace="~{common::navbar}"></nav>
            <h3 class="text-white" style="position: absolute; z-index: 1; padding: 1vmax;">历年四级平均成绩</h3>
            <!-- End Navbar -->
            <div class="panel-header panel-header-lg">
                <canvas id="bigDashboardChart"></canvas>
            </div>
            <div class="content">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="card card-chart">
                            <div class="card-header">
                                <h5 class="card-category">统计</h5>
                                <h4 class="card-title">各校考点人数分布</h4>
                            </div>
                            <div class="card-body">
                                <div class="chart-area">
                                    <canvas id="barChartSimpleGradientsNumbers"></canvas>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="stats">
                                    <i class="now-ui-icons ui-2_time-alarm" ></i>[[${#dates.format(#dates.createNow(),'yyyy/MM/dd')}]]
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="card card-chart">
                            <div class="card-header">
                                <h5 class="card-category">统计</h5>
                                <h4 class="card-title">四六级报名占比</h4>
                            </div>
                            <div class="card-body">
                                <div class="chart-area">
                                    <canvas id="lineChartExampleWithNumbersAndGrid"></canvas>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="stats">
                                    <i class="now-ui-icons arrows-1_refresh-69"></i>刚刚更新 [[${#dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm')}]]
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-category">最近记录</h5>
                                <h4 class="card-title">最近报名记录</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead class=" text-primary">
                                            <th>
                                                学生姓名
                                            </th>
                                            <th>
                                                报名等级
                                            </th>
                                            <th>
                                                考试院校
                                            </th>
                                            <th class="text-right">
                                                报名时间
                                            </th>
                                        </thead>
                                        <tbody>
                                            <tr th:each="log,index:${recentTestLogs}">
                                                <td th:text="${log.getName()}">
                                                    Dakota Rice
                                                </td>
                                                <td th:text="${log.getCetlevel()}">
                                                    Niger
                                                </td>
                                                <td th:text="${log.getTestschool()}">
                                                    Oud-Turnhout
                                                </td>
                                                <td class="text-right" th:text="${#dates.format(log.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">
                                                    $36,738
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--底部footer-->
            <footer th:replace="~{common::footer}"></footer>
        </div>
    </div>
    <!--通用footerJs-->
    <script th:replace="~{common::footerJs}"></script>
<script>
    var ctx = document.getElementById('lineChartExampleWithNumbersAndGrid').getContext("2d");
    var counts = [[${cetSignNumbers}]];
    data = {
        datasets: [{
            data: counts,
            backgroundColor: [
                "#36A2EB",
                "#f96332"
            ],
            hoverBackgroundColor: [
                "#36A2EB",
                "#f96332"
            ]
        }],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        labels: [
            '四级报名人次',
            '六级报名人次',
        ]
    };
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        responsive: true,
        data: data,
        // options: gradientChartOptionsConfigurationWithNumbersAndGrid,
        options: {
            maintainAspectRatio: false,
            legend: {
                display: true
            },
            responsive: true,
            layout:{
                padding:{left:0,right:0,top:15,bottom:15}
            }
        }
    });

</script>
</body>
<script>
    $(document).ready(function() {
        // Javascript method's body can be found in assets/js/demos.js
        demo.initDashboardPageCharts();
    });
</script>

</html>